<template>
  <div class="home">
    <left-side :is-show="leftshow"></left-side>
    <div :class="['container', rightSide]">
      <nav-bar 
      @on-left-side="onLeftSide"
      @on-sort-view="onSortView"></nav-bar>
      <div class="home-list">
        <touch-item></touch-item>
        <touch-item></touch-item>
        <touch-item></touch-item>
        <touch-item></touch-item>
        <touch-item></touch-item>
        <touch-item></touch-item>
        <touch-item></touch-item>
      </div>
      <foot-bar></foot-bar>
    </div>
    <sort-bgview 
      :sortview="sortview"
      @on-change-show="onChangeShow">
    </sort-bgview>
    <share-view 
    :is-show="showshare"
    @on-share-view="onShareView"></share-view>
  </div>
</template>

<script>
import TouchItem from '@/components/touchItem'
import NavBar from '@/components/navBar'
import LeftSide from '@/components/leftSide'
import FootBar from '@/components/footBar'
import SortBgview from '@/components/sortBgview'
import ShareView from './shareView.vue'
import bus from '../bus'

export default {
  name: 'home',
  data () {
    return {
      leftshow: false,
      sortview: false,
      showshare: false
    }
  },
  mounted () {
    bus.$on('on-share-click', () => {
      this.showshare = true
    })
  },
  methods: {
    onLeftSide () {
      this.leftshow = !this.leftshow
    },
    onSortView (point) {
      this.sortview = !this.sortview
    },
    onChangeShow (val) {
      this.sortview = val
    },
    onShareView (val) {
      this.showshare = val
    }
  },
  computed: {
    rightSide () {
      return {'container-move': this.leftshow}
    }
  },
  components: {
    TouchItem,
    NavBar,
    LeftSide,
    FootBar,
    SortBgview,
    ShareView
  }
}
</script>

<style scoped>

  .container-move{
    transform: translate(300px);
    pointer-events: none;
    /*overflow: hidden;*/
    height: 90%;
  }
  .home-list{
    padding-top: 16px;
    padding-bottom: 1px;
    z-index: 1000;
    overflow: auto;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .home{
    background-color: #262e34;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .container{
    background-color: white;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: hidden;
    align-items: center;
    background: linear-gradient(to bottom left, #66d0a3 , #6aa6b1);
    position: fixed;
  }
</style>
